<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style/weibo.css" rel="stylesheet" type="text/css"/>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<div class="jyArea">

</div>
</body>
<script type="text/babel">
    class TakeComment extends React.Component{
        render(){
            return (
                <div className="takeComment">
                    <textarea name="textarea" className="takeTextField" id="tijiaoText"></textarea>
                    <div className="takeSbmComment">
                        <input type="button" className="inputs" value=""/>
                    </div>
                </div>
            )
        }
    }
    class CommentOn extends React.Component{
        render(){
            return (
                <div className="commentOn">
                    <div className="noContent">哈哈哈哈</div>
                    <div className="messList">
                        <div className="reply">
                            <p className="replyContent">叽叽</p>
                            <p className="operation">
                                <span className="replyTime">2020.03.10 01:01:01</span>
                                <span className="handle">
                                        <a href="" onClick={e => e.preventDefault()} className="top">0</a>
                                        <a href="" onClick={e => e.preventDefault()} className="down_icon">9</a>
                                        <a href="" onClick={e => e.preventDefault()} className="cut">删除</a>
                                    </span>
                            </p>
                        </div>
                    </div>
                    <PageList/>
                </div>
            )
        }
    }
    class PageList extends React.Component{
        render(){
            return (
                <div className="page">
                    <a href="" onClick={e => e.preventDefault()} className="active">1</a>
                    <a href="" onClick={e => e.preventDefault()}>2</a>
                    <a href="" onClick={e => e.preventDefault()}>3</a>
                </div>
            )
        }
    }
    // 主组件
    class App extends React.Component {
        render() {
            return (
                <>
                    <TakeComment></TakeComment>
                    <CommentOn/>


                </>
            )
        }
    }

    const root = ReactDOM.createRoot(document.querySelector(".jyArea"));
    root.render(<App/>)
</script>
</html>